<template>
	<view :class="['navbar flex-row c-navbar', data.__device]" :style="{background:data._navigation_bar_color?data._navigation_bar_color.bottomBackgroundColor:''}" v-if="data._navbar&&data._navbar.navs&&data._navbar.navs.length>0">
    <block v-for="item in data._navbar.navs" :key="item.id">
        <navigator :appId="item.params.appid" class="flex-grow-1 flex-y-center" :data-open_type="item.open_type" openType="navigate" :path="item.params.path" target="miniProgram" :url="item.url" v-if="item.open_type=='wxapp'">
            <view>
                <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                <view class="navbar-text" :style="{color: item.active?item.active_color:item.color}">{{item.text}}
                    </view>
            </view>
        </navigator>
        <navigator @tap="$emit('navigatorClick',$event)" class="flex-grow-1 flex-y-center" :data-open_type="item.open_type" :data-tel="item.params.tel" openType="tel" :url="item.url" v-else-if="item.open_type=='tel'">
            <view>
                <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                <view class="navbar-text" :style="{color: item.active?item.active_color:item.color}">{{item.text}}
                    </view>
            </view>
        </navigator>
        <view class="flex-grow-1 flex-y-center" style="width:1%;padding-top:8upx;" v-else-if="item.open_type=='contact'">
            <view style="width:100%;">
                <button openType="contact" :sessionFrom="data._user_info.nickname">
                    <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                    <view class="navbar-text" :style="{color: item.active?item.active_color:item.color}">{{item.text}}
                            </view>
                </button>
            </view>
        </view>
        <navigator class="flex-grow-1 flex-y-center" openType="navigate" :url="'/pages/web/web?url='+item.params.web" v-else-if="item.open_type=='web'">
            <view>
                <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                <view class="navbar-text" :style="{color: item.active?item.active_color:item.color}">{{item.text}}
                    </view>
            </view>
        </navigator>
        <navigator class="flex-grow-1 flex-y-center" :data-open_type="item.open_type" openType="redirect" :url="item.new_url" v-else>
            <view>
                <image class="navbar-icon" :src="item.active?item.active_icon:item.icon"></image>
                <view class="navbar-text" :style="{color: item.active?item.active_color:item.color}">{{item.text}}
                    </view>
            </view>
        </navigator>
    </block>
</view>

</template>
<script>var myVue = {};
	export default {
		props:['data']
	}
</script>
<style scoped>
	
</style>